<style lang="less" scoped>
    @import "../../less/_variable.less";

    .header {
        border-bottom: 1px solid #efefef;
    }

    .b_i_t {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        background: #fff;
        padding: 0.3rem 0.45rem 0.42rem;
        p {
            margin: 0.51rem 0 0.3rem;
            font-size: 0.38rem;
            color: #111;

            em {
                color: @c_buttonHoverBgColor;
                font-style: normal;
            }
        }
    }

    .b_i_c {
        margin: 0.16rem 0;
        padding: 0.38rem 0 0;
        background: #fff;
        .l_c {
            padding: 0.26rem 0;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
        }
    }

    .day {
        background-color: #000;
        color: #fff;
        text-align: center;
        display: inline-block;
        padding: 6px 3px;
        border-radius: 3px;
        font-size: 0.3rem;
    }

    .main {
        .item {
            padding: 0 0.24rem 0;
            height: 0.9rem;
            font-size: 0.26rem;
            line-height: 0.4rem;
            color: #909090;
            border-top: 1px solid #efefef;
            .title {
                font-size: 0.26rem;
                color: #222;
            }
            .islink {
                max-width: 70%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                align-content: center;
            }
            .more_text {
                max-width: 90%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
</style>
<template>
    <div>
        <v-header title="拼单等待" v-show="!share">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
            <!--<a slot="right" v-on:click="sharePages">-->
                <!--<div class="write_share_icon"></div>-->
            <!--</a>-->
        </v-header>
        <div v-show="share" class="share_alert" @click="comJS.openApp()">在App打开>></div>
        <div class="main_allScroll">
            <scroller :on-infinite="loadMore ? infinite : getDone" :on-refresh="refresh" ref="myscroller">
            <div class="buying_info">
                <div class="b_i_t">
                    <clocker :time="comJS.clockerTime(tuanzhang.restTime || 0)" @on-finish="finish">
                        <span class="day">%_H1</span>
                        <span class="day">%_H2</span> :
                        <span class="day">%_M1</span>
                        <span class="day">%_M2</span> :
                        <span class="day">%_S1</span>
                        <span class="day">%_S2</span>
                    </clocker>
                    <p>还差<em>{{tuanzhang.restNeedNum}}人</em>,赶快邀请好友来拼单吧</p>
                    <button class="buying_btn btns" v-on:click="sharePages" style="position: static">邀请好友拼单</button>
                </div>
                <div class="b_i_c">
                    <div class="l_c">
                        <div class="buying_av_s" v-for="info in displayAcquired" :class="info.isOwner?'active':''">
                            <img v-lazy="{src: info.userHeadImgUrl}" alt="info.name">
                        </div>
                    </div>
                    <div class="main">
                        <div class="item" v-on:click="gotoPage('/home/product_details',{type:1,templateId:product.templateId})">
                            <div class="title">商品名称</div>
                            <div class="islink">
                                <div class="more_text">{{product.name}}</div>
                                <div class="right_icon"></div>

                            </div>
                        </div>
                        <div class="item">
                            <div class="title">拼单须知</div>
                            <div>·好友拼单 &nbsp;&nbsp;·人满发货 &nbsp;&nbsp;·人不满退款</div>
                        </div>
                    </div>
                </div>
            </div>
            <v-recommmend @updateLoadMore="updateLoadMore" ref="recommend"></v-recommmend>
            </scroller>
        </div>

    </div>
</template>
<script>

    import {Clocker} from 'vux'
    import {GET_HOMELIST} from "store/home";
    import {mapActions,mapState} from 'vuex'

    export default {
        components: {
            Clocker
        },
        data() {
            return {
                product: {},
                displayAcquired: [],
                tuanzhang: {},
                share:false,
                formShare:false,
                loadMore: false
            };
        },
        activated: function () {
            if(this.$route.query.sharePage && this.$route.query.sharePage === "1"){
                this.share = true
            }else if(this.$route.query.form && this.$route.query.form === 'share') {
                this.formShare = true
            }else {
                this.share = false
            }
            this.product = {}
            this.displayAcquired= []
            this.tuanzhang = {}
            this.loadMore = false
            this.getProduct();
            this.getDisplayAcquired()
        },

        methods: {
            ...mapActions([GET_HOMELIST]),
            updateLoadMore(data){
                this.loadMore = data
            },
            infinite(done){
                global.myLoad = true
                setTimeout(()=>{
                    this.$refs.recommend.getGoods(this.product.productInfo.parentCategory, done)
                },10)
            },
            getDone(){
                this.$refs.myscroller.finishInfinite(2)
            },
            refresh(done){
                this.getDisplayAcquired(done)
            },
            finish(){ // 倒计时结束后出发
                this.getDisplayAcquired()
            },
            callback:function(){
                if(this.formShare){
                    this.Interactive.activityWebDismiss();
                } else{
                    this.$router.goBack();
                }
            },
            //获取订单详情
            getProduct() {
                //获取商品详情
                this.$ajax.getGoodsDetail({goodsId: this.$route.query.templateId})
                    .then((res) => {
                        this.product = res.body.content;
                        this.product.name = this.product.productInfo.name
                        this.$refs.recommend.getGoods(this.product.productInfo.parentCategory)
                    })
            },
            //获取拼单列表
            getDisplayAcquired(done) {
                let that = this
                this.$ajax.displayAcquired({orderId: this.$route.query.orderId})
                    .then((res) => {
                        if(done){
                            done()
                        }
                        that.displayAcquired = res.body.content.unionBuyInfoVOList;
                        console.log(res.body.content.unionBuyInfoVOList)
                        console.log(that.displayAcquired)
                        if(res.body.content.orderStatus == 13){
                            that.$router.replace({path: '/collage/result', query: {orderId: that.$route.query.orderId}})
                            return;
                        }
                        // if(that.displayAcquired[0].restTime == 0){
                        //     that.$vux.confirm.show({
                        //         type: 'text',
                        //         title: '拼单失败消息提醒',
                        //         content: '本次拼单失败，点击确认重新拼单',
                        //         onCancel () {
                        //             that.$router.replace({path: '/collage',query:{}})
                        //         },
                        //         onConfirm () {
                        //             that.$router.replace({path: '/home/product_details', query: {type: that.$route.query.type, templateId: that.$route.query.templateId}})
                        //         }
                        //     })
                        //     return;
                        // }
                        if (that.displayAcquired !== null && that.displayAcquired.length > 0) {
                            for (let i = 0; i < that.displayAcquired.length; i++) {
                                let obj = that.displayAcquired[i];
                                if (obj.isOwner) {
                                    that.tuanzhang = obj;
                                }
                            }
                        }
                    })
            },
            sharePages() {
                let obj = {
                    "title": "【仅剩" + this.tuanzhang.restNeedNum + "个名额】" + "【￥" + (this.product.minSellPrice != null ? this.product.minSellPrice : this.product.price) + "】" + this.product.name,
                    "content": "我在铺连铺发起了一个拼单，赶快来参与一下吧！",
                    "imageUrl": this.product.productInfo.mainImage,
                    "shareUrl": this.comJS.addSharePageUrl(window.location.origin + "/#/collage/join?templateId=" + this.product.templateId + "&orderId=" + this.$route.query.orderId+ "&token="+ localStorage.getItem('t')),
                    "originalPage": 'pages/goods/spell/spellListDetail?goodsId=' + this.product.templateId + '&orderId=' + this.$route.query.orderId + '&inviteCode=' + localStorage.getItem('inviteCode') + '&loginToken=' + localStorage.getItem('t') + '&form=share',
                }
                this.Interactive.shareClick(obj);
            },
            gotoPage(path, obj) {
                if(this.share){
                    this.comJS.openApp()
                    return;
                }
                if (obj) {
                    this.$router.push({
                        path: path,
                        query: obj
                    })
                } else {
                    this.$router.push({
                        path: path,
                    })
                }
            },
        },
        computed: mapState({interactive: state => state.interactive}),
    }
</script>